<template>
  <div class="container-item-upload-poster">
    <div class="item-poster" style="flex-direction: initial">
      <el-input style="margin-right:10px" :disabled="true" placeholder="点击上传按钮添加图片" />
      <input class="item-upload" type="file" @change="changeHandler">
      <el-button circle class="el-icon-upload" type="primary" />
      <el-button circle class="el-icon-edit" type="warning" />
    </div>
    <itemPosterList :value="self_list" value-key="img" :show-delete="true" @delete="deleteImageHandler" />
  </div>
</template>

<script>
// api
import { savePoster } from '@/api/miva';
// utils
import { ossPutUpload } from '@/utils/upload_handler';
// item
import itemPosterList from '@/components/miva-item/item-poster-list';
export default {
  components: { itemPosterList },
  data() {
    return {
      self_list: []
    };
  },
  computed: {
    com_list() {
      const arr = [];
      for (const val of this.self_list) {
        arr.push(val.id);
      }
      return arr;
    }
  },
  watch: {
    self_list(val) {
      console.log(val);
      console.log(this.com_list);
      this.$emit('getPoster', this.com_list);
    }
  },
  methods: {
    // input change事件处理器
    async changeHandler(evt) {
      const [file] = evt.target.files;
      const { url } = await ossPutUpload({ file });
      const { data: { insertId }} = await savePoster({ img: url });
      this.self_list.push({ img: url, id: insertId });
      evt.target.value = '';
    },
    // 删除图片
    deleteImageHandler(index) {
      this.self_list.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.container-item-upload-poster {
  .group{
    &-poster{
      display: flex;
    }
  }
  .item {
    &-image {
      width: 64px;
      height: 128px;
      margin: 0 10px 10px 0;
      box-shadow: 0 0 3px #ddd;
    }
    &-poster {
      margin-bottom: 10px;
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    &-upload {
      border: 1px solid;
      width: calc(100% - 38px);
      height: 100%;
      position: absolute;
      display: block;
      opacity: 0;
    }
  }
}
</style>
